<template>
  <div class="film-item" @click="skipDetailPath">
    <div class="movieImg"><img v-lazy="film.poster" alt="" /></div>
    <div class="movieDetail">
      <div class="top">
        <p class="title">{{ film.name }}</p>
        <movie-type :filmType="film.item.name" />
      </div>
      <p class="grade" v-if="film.grade">
        观众评分:<span class="textcolor">{{ film.grade }}</span>
      </p>
      <p v-if="text === '购票' && !film.grade" class="grade"></p>
      <p class="actor">主演: {{ allActor }}</p>
      <p v-if="text === '购票'">{{ film.nation }} | {{ film.runtime }}分钟</p>
      <p v-else>上映日期: {{ film.premiereAt | formateTime }}</p>
    </div>
    <buy-box v-if="film.isPresale" :activeColor="activeColor" class="buybox">
      {{ text }}
    </buy-box>
  </div>
</template>

<script>
import MovieType from 'components/content/movieType/MovieType.vue'
export default {
  components: { MovieType },
  name: 'FilmItem',
  props: ['film', 'text'],
  computed: {
    allActor() {
      if (this.film.actors) {
        return this.film.actors.map(actor => actor.name).join(' ')
      } else {
        return '暂无主演'
      }
    },
    activeColor() {
      return this.text === '购票' ? '#ff5f16' : '#ffb232'
    }
  },
  methods: {
    skipDetailPath() {
      this.$router.push('/films/' + this.film.filmId)
    }
  }
}
</script>

<style lang="scss" scoped>
.film-item {
  height: 0.94rem;
  padding: 0.15rem;
  display: flex;
  border-bottom: 0.5px solid #eee;
  color: #797d82;
  background: white;
  box-sizing: content-box;
  .top {
    display: flex;
    margin-top: 0.1rem;
    align-items: center;
    .title {
      color: #191a1b;
      font-size: 16px;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .type {
      background: #d2d6dc;
      color: white;
      border-radius: 0.02rem;
      font-size: 0.14rem;
      height: 0.14rem;
      width: 0.21rem;
      margin-left: 0.05rem;
      text-align: center;
    }
  }

  p {
    margin: 0;
    margin-bottom: 0.05rem;
  }
  font-size: 0.13rem;
  .movieImg {
    width: 0.66rem;
    img {
      width: 100%;
    }
  }
  .movieDetail {
    width: 2.09rem;
    padding-left: 0.15rem;
    .actor {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .grade {
      height: 0.16rem;
    }
  }
  .textcolor {
    color: #ffb232;
    font-size: 0.14rem;
  }
}
.buybox {
  flex: 1;
}
</style>